<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词,关键字">
    <meta name="Description" content="描述信息">
    <title>五子棋AI算法</title>
    <style>
        * {
            margin: 0;
        }

        canvas {
            background: #eccb75;
            margin: 100px auto;
            display: block;
            /* 周围阴影*/
            box-shadow: 0px 0px 10px #000;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="450" height="450">对不起你的浏览器不支持canvas请选择更高版本的浏览器</canvas>
<!--javascript-->
<script>
    var over = false;
    //拿到画板
    var chess = document.getElementById("canvas");
    //获取权限
    var context = chess.getContext("2d");
    context.strokeStyle = "#555554";//线条颜色
    //绘制棋盘的方法
    var drawChessBoard = function () {
        for (var i = 0; i < 15; i++) {
            //起点
            context.moveTo(15 + i * 30, 15);
            //终点
            context.lineTo(15 + i * 30, 435);
            //链接
            context.stroke();
            //起点
            context.moveTo(15, 15 + i * 30);
            //终点
            context.lineTo(435, 15 + i * 30);
            //链接
            context.stroke();
        }
    };
    drawChessBoard();
    //绘制棋子
    var onStep = function (i, j, me) {
        context.beginPath();//开始路径
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, Math.PI * 2);
        context.closePath();//结束路径
        context.stroke();
        //渐变色
        var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2,0);
        if (me) {
            gradient.addColorStop(0, "#0a0a0a");
            gradient.addColorStop(1, "636767");
        } else {
            gradient.addColorStop(0, "d1d1d1");
            gradient.addColorStop(1, "f9f9f9");
        }
        context.fillStyle = gradient;//设置填充色
        context.fill();//填充
    };
    //下棋的方法
    var me = true;
    var chessBoard = [];
    for (var i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (var j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    chess.onclick = function (e) {
        if (over) return;
        if (!me) return;
        //获取鼠标点击的位置
        var x = e.offsetX;
        var y = e.offsetY;
        var i = Math.floor(x / 30);
        var j = Math.floor(y / 30);
        //只有没有下棋的地方才能落子
        if (chessBoard[i][j] == 0) {
            onStep(i, j, me);
            chessBoard[i][j] = 1;
            for (var k = 0; k < count; k++) {
                if (wins[i][j][k]) {
                    myWin[k]++;
                    computerWin[k] = 6;
                    if (myWin[k] == 5) {
                        window.alert("恭喜你你赢了!");
                        over = true;
                    }
                }
            }
            if (!over) {
                me = !me;
                computerAI();
            }
        }
    };
    //定义规则
    var wins = [];
    for (var i = 0; i < 15; i++) {
        wins[i] = [];
        for (var j = 0; j < 15; j++) {
            wins[i][j] = [];
        }
    }
    var count = 0;//统计一共有多少中赢法
    //横线赢的算法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i][j + k][count] = true;
            }
            count++;
        }
    }
    //竖线的算法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[j + k][i][count] = true;
            }
            count++;
        }
    }
    for (var i = 0; i < 11; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i + k][j + k][count] = true;
            }
            count++;
        }
    }
    for (var i = 0; i < 11; i++) {
        for (var j = 14; j > 3; j--) {
            for (var k = 0; k < 5; k++) {
                wins[i + k][j - k][count] = true;
            }
            count++;
        }
    }
    // console.log(count);//572种赢法
    // 赢发统计数组
    var myWin = [];
    var computerWin = [];
    for (var i = 0; i < count; i++) {
        myWin[i] = 0;
        computerWin[i] = 0;
    }
    //    计算机的AI算法
    var computerAI = function () {
        var mySoucre = [];//我方分数
        var computerSoucre = [];//计算机分数
        var max = 0;//保存最高点分数
        var u = 0, v = 0;//保存最高点分数坐标
        //初始化分数
        for (var i = 0; i < 15; i++) {
            mySoucre[i] = [];
            computerSoucre[i] = [];
            for (var j = 0; j < 15; j++) {
                mySoucre[i][j] = 0;
                computerSoucre[i][j] = 0;
            }
        }
        //计算计算机下棋的位置
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 15; j++) {
                if (chessBoard[i][j] == 0) {
                    for (var k = 0; k < count; k++) {
                        if (wins[i][j][k]) {
                            //我方积分
                            if (myWin[k] == 1) {
                                mySoucre[i][j] += 200;
                            } else if (myWin[k] == 2) {
                                mySoucre[i][j] += 400;
                            } else if (myWin[k] == 3) {
                                mySoucre[i][j] += 600;
                            } else if (myWin[k] == 4) {
                                mySoucre[i][j] += 1000;
                            }
                            //计算机积分
                            if (computerWin[k] == 1) {
                                computerSoucre[i][j] += 200;
                            } else if (computerWin[k] == 2) {
                                computerSoucre[i][j] += 4300;
                            } else if (computerWin[k] == 3) {
                                computerSoucre[i][j] += 6030;
                            } else if (computerWin[k] == 4) {
                                computerSoucre[i][j] += 10030;
                            }
                        }
                    }
                    if (mySoucre[i][j] > max) {
                        max = mySoucre[i][j];//保存最高分数坐标
                        u = i;
                        v = j;
                    } else if (mySoucre[i][j] == max) {
                        if (computerSoucre[i][j] > computerSoucre[u][v]) {
                            u = i;
                            v = j;
                        }
                    }
                    if (computerSoucre[i][j] > max) {
                        max = computerSoucre[i][j];//保存最高分数
                        u = i;
                        v = j;
                    } else if (computerSoucre[i][j] == max) {
                        if (mySoucre[i][j] > mySoucre[u][v]) {
                            u = i;
                            v = j;
                        }
                    }
                }
            }
        }
        onStep(u, v, false);
        chessBoard[u][v] = 2;
        for (var k = 0; k < count; k++) {
            if (wins[u][v][k]) {
                computerWin[k]++;
                myWin[k] = 6;
                if (computerWin[k] == 5) {
                    window.alert("很遗憾计算机赢了!!");
                    over = true;
                }
            }
        }
        if (!over) {
            me = !me;
        }
    }
</script>
</body>
</html>












